import {Component} from 'react';

export default class DragProgressBar extends Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }

  componentDidMount() {
    let t = this;
    var lineDiv = document.getElementById('DraoProgressBar-lineProgress'); //长线条
    var minDiv = document.getElementById('DraoProgressBar-minBtn'); //小方块
    var selected = document.getElementById('DraoProgressBar-selected'); //已选进度
    var msg = document.getElementById("DraoProgressBar-ddMsg");
    var ifBool = false; //判断鼠标是否按下
    //事件
    var start = function(e) {
        e.stopPropagation();
        ifBool = true;
        console.log("鼠标按下")
    }
    var move = function(e) {
        console.log("鼠标拖动")
        if(ifBool) {
          debugger;
            if(!e.touches) {    //兼容移动端
                var x = e.clientX;
            } else {     //兼容PC端
                var x = e.touches[0].pageX;
            }
            //var x = e.touches[0].pageX || e.clientX; //鼠标横坐标var x
            var lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标
            var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值
            if(minDiv_left >= lineDiv.offsetWidth - 15) {
                minDiv_left = lineDiv.offsetWidth - 15;
            }
            if(minDiv_left < 0) {
                minDiv_left = 0;
            }
            //设置拖动后小方块的left值
            minDiv.style.left = minDiv_left + "px";
            selected.style.width=(minDiv_left+10) + "px";
            let progressValue = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
            msg.innerText = progressValue;
            t.props.onChange(progressValue);
        }
    }
    var end = function(e) {
        console.log("鼠标弹起")
        ifBool = false;
    }

    if(!this.props.readOnly){
      //鼠标按下方块
      minDiv.addEventListener("touchstart", start);
      /*minDiv.addEventListener("mousedown", start);*/
      //拖动
      window.addEventListener("touchmove", move);
      /*window.addEventListener("mousemove", move);*/
      //鼠标松开
      window.addEventListener("touchend", end);
      /*window.addEventListener("mouseup", end);*/
    }
    //获取元素的绝对位置
    function getPosition(node) {
        var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
        var top = node.offsetTop;
        var width = node.offsetWidth;
        var current = node.offsetParent; // 取得元素的offsetParent
        　 // 一直循环直到根元素
        　　
        while(current != null) {　　
            left += current.offsetLeft;　　
            top += current.offsetTop;　
            width += current.offsetWidth;　
            current = current.offsetParent;　　
        }
        return {
            "left": left,
            "top": top,
            "width": width
        };
    }
  }

  show = function(newValue, e) {
      var lineDiv = document.getElementById('DraoProgressBar-lineProgress'); //长线条
      var minDiv = document.getElementById('DraoProgressBar-minBtn'); //小方块
      var selected = document.getElementById('DraoProgressBar-selected'); //已选进度
      var msg = document.getElementById("DraoProgressBar-ddMsg");
      if(newValue && newValue > 0 && newValue <= 100){
          debugger;
          var minDiv_length = (lineDiv.offsetWidth) * newValue / 100;
          minDiv.style.left = minDiv_length + "px";
          selected.style.width=(minDiv_length + 10) + "px";
      }
  }

  render() {
    this.show(this.props.progressValue);
    return (
      <div id="DraoProgressBar-lineProgress" className="dd-progress-line">
        <div id="DraoProgressBar-minBtn" className="dd-pro-btn">
        </div>
        <div id="DraoProgressBar-selected" className="dd-pro-selected">
        </div>
        <h3><span id="DraoProgressBar-ddMsg">{this.props.progressValue}</span>%</h3>
      </div>
    );
  }
}
